<meta charset="UTF-8">
<style type="text/css">
	body {
		background: #BDBDBD; 
	}

	header{
		width: 1020px;
		height: 30px;
		background: #000;
		position: fixed;
		top: 0;
		box-shadow: 0px 0px 25px #000000;
        -webkit-box-shadow:0px 0px 25px #000000;
        -moz-box-shadow: 0px 0px 25px #000000;
	}
	footer {
		width: 1020px;
		height: 30px;
		background: #000;
		position: fixed;
		bottom: 0;
		box-shadow: 0px 0px 25px #000000;
        -webkit-box-shadow:0px 0px 25px #000000;
        -moz-box-shadow: 0px 0px 25px #000000;
	}
	nav {
		position: absolute;
		top: -16px;
	}

	nav li {
		cursor: pointer;
	}
	#page-zone {
		width: 1020px;
		height: 1000px;
		background: #FFF;
		margin: 0 auto;
		box-shadow: 0px 0px 25px #000000;
        -webkit-box-shadow:0px 0px 25px #000000;
        -moz-box-shadow: 0px 0px 25px #000000;
	}

	.nav {
		list-style: none;
		float: left;
		width: 1020px;
	}

	.mleft {
		width: 690px;		
	}

	.mright {
		width: 250px;
	}

	.nav .mcol2, .nav .mcol1 {
		float: left;
	}

	.mcol1 {
		width: 50px;
	}
	.mcol2{
		width:190px;
		margin: 5px 0;
	}


	.into-page {
		width: 1018px;
		height: 1000px;
		margin: 0 auto;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
	}

	.mvertical {
		list-style: none;
		margin-top: 8px;
		background: #000;
		color: #FFF;
		font-size: 12px;
		width: 100px;
		height: 0px;
		overflow: hidden;
		box-shadow: 0px 0px 25px #000000;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px; 
        -webkit-box-shadow:0px 0px 25px #000000;
        -moz-box-shadow: 0px 0px 25px #000000;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -moz-border-bottom-left-radius: 10px;
	}
	.mvertical li {
		padding: 5px 0;
	}
</style>
<script src="http://code.jquery.com/jquery-1.10.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	click = false;
	$(".perfil").click(function(e){
		e.preventDefault();
		if ( click == false ){
			$(".mvertical").animate({
				'height': '120px'
			},1000,function(){ click = true; });
		} else {
			$(".mvertical").animate({
				'height': '0px'
			},1000,function(){ click = false; });
		}
	});
});
</script>
<body>
<section id="page-zone">
	<header>
		<nav>
			<ul class="nav mleft">
			</ul>
			<ul class="nav mright">
				<li class="mcol1"><img src="" style="width:28px; height:28px; border: 1px solid #FFF;"></li>
				<li class="mcol2"><span style="color: #FFF;font-size: 14px;" class="perfil">Ing. Cesar Chavez Nava.</span>
					<ul class="mvertical">
						<li>Tú Perfil</li>
						<li>Configuración</li>
						<li>Privacidad</li>
						<li>Cerrar Sesión</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
	<section class="into-page">
		<article>
		</article>
		<aside>
		</aside>
	</section>
	<footer>
	</footer>
</section>
</body>
